<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- STYLESHEETS -->
  <!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
  <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
  <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
  <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../../js/dropdown/dropdown.css">

  <!-- datatable -->
  <link rel="stylesheet" href="../../js/datatables/datatable.css">
  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">


</head>

<body>
  <header class="navbar clearfix" id="header">
  </header>
  <!-- PAGE -->
  <section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-menu nav-collapse">
        <!-- SIDEBAR MENU -->
        <ul>
        </ul>
        <!-- /SIDEBAR MENU -->
      </div>
    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
      <div class="container">
        <div class="row">
          <div id="content" class="col-lg-12">
            <!-- PAGE HEADER-->
            <div class="row" style="height: 30px;">
              <div class="col-sm-12">
                <div class="page-header">
                  <!-- STYLER -->

                  <!-- /STYLER -->
                  <!-- BREADCRUMBS -->
                  <ul class="breadcrumb">
                    <li>
                      <i class="fa fa-home"></i>
                      <a href="../index.html">首页</a>
                    </li>
                    <li>
                      <a href="#">合同管理</a>
                    </li>
                    <li>供应商管理</li>
                  </ul>
                  <!-- /BREADCRUMBS -->

                </div>
              </div>
            </div>
            <!-- /PAGE HEADER -->
            <!-- FORMS QUERY-->
            <div class="row">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-md-12">
                    <div class="box border primary">
                      <div class="box-title">
                        <h4>
                          <i class="fa fa-bars"></i>查询条件</h4>
                      </div>
                      <div class="box-body big" style="padding:10px;">
                        <form class="form-horizontal" role="form">
                          <div class="form-group mrg-bt10">
                            <!-- <label class="col-sm-1 control-label" style="width: auto">商家名称：</label>
                            <div class="supplierName">
                            </div> -->
                            <label class="col-sm-1 control-label" style="width: auto">商品编码：</label>
                            <div class="col-sm-2" style="width: 150px">
                              <input type="text" class="form-control" name="productCode" placeholder="输入关键字">
                            </div>
                            <label class="col-sm-1 control-label" style="width: auto">商品名称：</label>
                            <div class="col-sm-2" style="width: 150px">
                              <input type="text" class="form-control" name="productName" placeholder="输入关键字">
                            </div>
                            <div class="col-sm-1">
                              <a class="btn btn-primary search">查询</a>
                            </div>
                            <input type="hidden" name="supplierId">
                            <input type="hidden" name="id">
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <!-- TABLES -->
              <div class="col-md-12">
                <!-- BOX -->
                <div class="box border primary">
                  <div class="box-title">
                    <h4>
                      <i class="fa fa-table"></i>商品明细
                      <!-- <span id="total"></span>条 -->
                    </h4>
                  </div>
                  <div class="box-body">
                    <table id="db_group_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

                    </table>
                  </div>
                </div>
                <!-- /BOX -->
              </div>
            </div>
            <!-- /TABLES -->

            <div class="footer-tools">
              <span class="go-top">
                <i class="fa fa-chevron-up"></i> Top
              </span>
            </div>
          </div>
          <!-- /CONTENT-->
        </div>
      </div>
    </div>
    <input type="hidden" name="groupId" />
  </section>

  <!--/PAGE -->
  <!-- JAVASCRIPTS -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- JQUERY -->
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
  <!-- JQUERY UI-->
  <script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <!-- BOOTSTRAP -->
  <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

  <!-- BLOCK UI -->
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

  <!-- AUTOSIZE -->
  <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>

  <!-- INPUT MASK -->
  <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

  <!-- SELECT2 -->
  <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
  <!-- UNIFORM -->
  <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>

  <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
  <!-- spinner -->
  <script src="../../js/spinner/spin.js"></script>
  <!-- DATA TABLES -->
  <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
  <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

  <!--bootbox-->
  <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
  <!-- COOKIE -->
  <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
  <!-- CUSTOM SCRIPT -->
  <script src="../../js/script.js"></script>
  <script src="../../js/common.js"></script>
  <script>
    var productDetail = {
      mainDataTable: null,
      id: $.getUrlParam("sid"),
      supplierName: $.getUrlParam("name"),
      oldProductCode: "",
      oldProductName: "",
      // 初始化
      init: function () {
        $(".supplierName").html(this.supplierName);
        this.searchGroup(this.id);
        this.addSearchEvent()
      },
      /**
      * 查询
      * supplierId [String] 商家 id 必传
      * productCode [String] 商品编码 
      * productName [String] 商品名称
      */
      searchGroup: function (supplierId,productCode,productName) {
        var url = App.getContextPath() + "admin/store/searchSkuInfoList.do?supplierId=" + supplierId;
        if (productCode) {
          url += '&productCode=' + productCode;
        }
        if (productName) {
          url += '&q=' + productName;
        }
        var dtSetting = $.dataTableSetting({
          "ajaxSource": url,
          "serverSide": true,
          "bFilter": false,// 去掉搜索框
          "bLengthChange": false,// 每页显示数量	
          "sScrollX": "100%",
          "sScrollXInner": "100%",
          "iDisplayLength": 10,
          "bSort": false,
          "aoColumns": [{
            "mDataProp": "productCode",
            "sTitle": "商品编码",
            "width": "10%"
          }, {
            "mDataProp": "productName",
            "sTitle": "商品名称",
            "width": "10%"
          }, {
            "mDataProp": "skuCode",
            "sTitle": "SKU编码",
            "width": "10%"
          }, {
            "mDataProp": "sizeName",
            "sTitle": "尺码",
            "width": "10%"
          }, {
            "mDataProp": "salesPrice",
            "sTitle": "销售价",
            "width": "10%",
            "class": "format_thousands"
          }, {
            "mDataProp": "costPrice",
            "sTitle": "成本价",
            "width": "10%",
            "class": "format_thousands"
          },{
            "mDataProp": "barCode",
            "sTitle": "条形码",
            "width": "10%"
          }]
        });
        this.mainDataTable = $("#db_group_list").dataTable(dtSetting);
      },
      // 添加查询绑定事件, 获取查询条件！
      addSearchEvent: function () {
        var that = this;
        $(".search").click(function() {
          var productCode=$("input[name=productCode]").val().trim(); 
	        var productName=$("input[name=productName]").val().trim();
          if(productCode == that.oldProductCode && productName == that.oldProductName) {
            //$.alert('请输入查询条件!');
            return;
          }
          that.searchGroup(that.id, productCode, productName);
          that.oldProductCode = productCode;
          that.oldProductName = productName;
        });
      }
    }
    $(function () {
      $("#header").load("../head.html");
      App.init();
      productDetail.init();
    });
  </script>
  <!-- /JAVASCRIPTS -->
</body>

</html>